<template>
<!-- 用户选择器，弹出查询对话框选择用户的方式  -->
  <div class="topnav-content">
    <Input clearable search
           @on-search="search"
           @on-clear="clear"
           v-model="srhValue_"
           :disabled="disabled_"
           :placeholder="placeholder" />
<!--    <Button @click="test">Test</Button>-->
    <Modal v-model="selectModel"  :loading="modalLoading" :title="$t('select_people')" width="800px" @on-ok="modelOk"  @on-cancel="modelCancel">
      <!-- footer-hide="false" -->
      <SearchHeader v-model="queryParam.where.keyword" :canAdd="false" @handleSearch="search"  @handleInit="queryParam.init">
        <Row :gutter="4">
          <Col span="6"><Input clearable :placeholder="$t('user_code')" v-model="queryParam.where.code"></Input> </Col>
          <Col span="6"><Input clearable :placeholder="$t('user_name')" v-model="queryParam.where.name"></Input> </Col>
          <Col span="6"><Input clearable :placeholder="$t('user_account')" v-model="queryParam.where.loginName"></Input> </Col>
          <Col span="6"><OrganizationTree v-model="queryParam.where.orgId" ref="organization" width="200px"/> </Col>
<!--          <Col span="1"><Button type="primary" icon="ios-search" @click="search">查询</Button></Col>-->
        </Row>
      </SearchHeader>
      <!--      <Row :gutter="4">
        <Col span="5"><Input placeholder="编号" v-model="queryParam.where.code"></Input> </Col>
        <Col span="5"><Input placeholder="姓名" v-model="queryParam.where.name"></Input> </Col>
        <Col span="5"><Input placeholder="登录名" v-model="queryParam.where.loginName"></Input> </Col>
        <Col span="1"><Button type="primary" icon="ios-search" @click="search">查询</Button></Col>
      </Row>-->
      <Card>
        <Table border :columns="columns" :data="tableData" @on-row-click="rowclick">
          <template slot-scope="{ row, index }" slot="select">
            <Button type="default" size="small" @click="rowclick(row,index)">{{$t('select')}}</Button>
          </template>
        </Table>
        <Page class="panel-page" :total="queryParam.page.total" :current="queryParam.page.pages" :page-size="queryParam.page.size" @on-change="changePage" show-elevator show-sizer show-total />
      </Card>
    </Modal>
  </div>
</template>
<script>
import {queryPage} from '@/api/user';
import OrganizationTree from '@/components/topnav/OrganizationTree';
import SearchHeader from "@/view/Common/SearchHeader";
import {apiResult} from "@/libs/util";
export default {
  name: 'UserModelSelect',
  components: {SearchHeader,OrganizationTree},
  props: {
    readonly: {type: Boolean, default () {return false}},
    placeholder: {type: String,default() {this.$t('select_people')}},
    selectValue: {type: Number},
    srhValue: {type: String}, //显示UserName在搜索框内
    /*userName: {type: String}*/
  },
  watch:{
    'srhValue'(nValue,oValue){
      //console.log("srhValue: %o,%o",nValue,oValue);
      this.srhValue_=nValue;
    },
    'readonly'(nValue,oValue){
      //console.log("readonly: %o,%o",nValue,oValue);
      this.disabled_ = nValue;
    }
  },

  // v-model
  model:{
    prop: 'selectValue',//返回值
    event: "dataChange" //触发此事件返回值
  },
  data(){
    return {
      disabled_:false,
      selectModel:false,
      modalLoading:false,
      modelWidth:600,
      srhValue_:null,
      //srhValue:null,
      tableData:[],
      queryParam:{
        page: {
          desc: ['create_time'],
          pages: 1,
          size: 10,
          total: 0,
          current: 1,
        },
        where:{
          keyword:null,
          code:null,
          name:null,
          loginName:null,
          orgId:null,
        },
        init:()=>{
          this.queryParam.where.keyword=null,
          this.queryParam.where.code=null,
          this.queryParam.where.name=null,
          this.queryParam.where.loginName=null,
          this.queryParam.where.orgId=null
        }
      },
      columns: [
        {title: this.$t('select'), key: 'action', width: 100,slot: 'select'},
        {title: this.$t('user_code'), key: 'code', sortable: true, width: 175},
        {title: this.$t('user_name'), key: 'name', sortable: true, width: 200},
        {title: this.$t('user_account'), key: 'loginName', sortable: true, width: 200},
        {title: this.$t('organization_name'), key: 'orgName', sortable: true, width: 200},
      ],
    }
  },
  methods:{
    clear(){
      this.$emit('dataChange', null);
    },
    modelOk(){
      this.modalLoading = false;
/*      setTimeout(() => {
        this.modalLoading = true;
        this.addModal = true;
      }, 1000);*/
    },
    modelCancel(){
      console.log("modelCancel()");
      this.srhValue_ = null;
      this.$emit('dataChange', null);
      /** 在主件中用 @dataRow="function" 在funtion中可以接收数据 row*/
      this.$emit('result', null);
    },
    search(){
      /** 生成查询条件 */
      this.queryParam.page.current = this.queryParam.page.pages * this.queryParam.page.size;
      //this.queryParam.where.orgId = this.$refs.organization.getValue();

      queryPage(JSON.stringify(this.queryParam)).then(res => {
        this.tableData = null;
        apiResult(res.data,false,result=>{
          this.tableData = result.data.records;
        });
      })
      this.modalLoading = false;
      this.selectModel=true;
    },
    changePage(){search()},
    rowclick(row,index){
      this.selectModel = false;
      this.srhValue_ = row.name;
      /** 会row 数据传给 selectValue，给父元素的v-model*/
      this.$emit('dataChange', row.id);
      /** 在主件中用 @dataRow="function" 在funtion中可以接收数据 row*/
      this.$emit('result', row);
    },
    test(){
      console.log(this.disabled_)
      this.disabled_ = !this.disabled_;
      console.log(this.disabled_)
    }
  },
  mounted(){
    console.log(this.readonly);
  }
}
</script>
<style lang="less">
@import "./topnav";
</style>
